<template>
  <div class="container">
    <el-dialog
      :visible.sync="isShowDialog"
      width="600px"
      :modal="false"
      :close-on-click-modal="false"
      class="thisblack-bgc"
    >
      <span slot="title">
        <p class="head-title">修改密码</p>
      </span>
      <div class="content pt30 pb30">
        <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
          <el-form-item label="手机号" prop="mobile" class="mb24">
            <el-input v-model.trim="ruleForm.mobile"  class="w300" :disabled="true" />
          </el-form-item>
          <el-form-item label="验证码" prop="code" class="mb24">
            <el-input v-model.trim="ruleForm.code"  class="w300" placeholder="请输入验证码"><template slot="append">
              <div>
                <span v-if="timeShow" class="input-send" @click="getSendCode">发送验证码</span>
                <span v-if="!timeShow" class="input-send count">重新获取({{ count }}秒)</span>
                <p class="error-tip">{{ verification.codeText }}</p>
              </div>

            </template>
            </el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="password" class="mb24">
            <el-input v-model.trim="ruleForm.password" class="w300" :type="inputType" placeholder="请输入新密码">
              <template slot="suffix">
                <span v-if="inputType == 'password'" class="input-send" @click="inputType = 'text'"><svg-icon icon-class="close-eyes" style="color:#4F5862 ;" /></span>
                <span v-if="inputType == 'text'" class="input-send" @click="inputType = 'password'"><svg-icon icon-class="open-eyes" style="color:#4F5862 ;" /></span>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="确认新密码" prop="password2" class="mb24">
            <el-input v-model.trim="ruleForm.password2" class="w300" :type="inputType2" placeholder="请确认新密码">
              <template slot="suffix">
                <span v-if="inputType2 == 'password'" class="input-send" @click="inputType2 = 'text'"><svg-icon icon-class="close-eyes" style="color:#4F5862 ;" /></span>
                <span v-if="inputType2 == 'text'" class="input-send" @click="inputType2 = 'password'"><svg-icon icon-class="open-eyes" style="color:#4F5862 ;" /></span>
              </template>
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="getChangeLogoCancel('ruleForm')">取消</el-button>
        <el-button type="primary" @click="getChangeLogo('ruleForm')">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import api from '@/api'
import { checkPhone } from '@/utils/validate'
export default {
  name: 'SuperAdmin',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    boothname: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.ruleForm.password2 !== '') {
          this.$refs.ruleForm.validateField('password2')
        }
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      const reg = /^(?![A-Za-z]+$)(?![A-Z\d]+$)(?![A-Z\W]+$)(?![a-z\d]+$)(?![a-z\W]+$)(?![\d\W]+$)\S{8,16}$/

      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (!reg.test(value)) {
        callback(new Error('8-16位字符，至少包含数字 大小写字母 或特殊符号的任意三个'))
      } else if (value !== this.ruleForm.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      inputType: 'password',
      inputType2: 'password',
      ruleForm: {
        password: '',
        password2: '',
        mobile: '',
        code: ''
      },
      rules: {
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 8, max: 16, message: '8-16位字符，至少包含数字 大小写字母 或特殊符号的任意三个', trigger: 'blur' },
          { validator: validatePass, trigger: 'blur' }
        ],
        password2: [
          { required: true, message: '请确认密码', trigger: 'blur' },
          { min: 8, max: 16, message: '8-16位字符，至少包含数字 大小写字母 或特殊符号的任意三个', trigger: 'blur' },
          { validator: validatePass2, trigger: 'blur', required: true }
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'blur' }
        ]
      },
      timeShow: true,
      count: '',
      timer: null,
      verification: {
        mobile: true,
        codeText: '',
        passwordText: '',
        boothNo: ''
      }
    }
  },
  computed: {
    isShowDialog: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('closeEvents', 'isLogo', val)
      }
    }
  },
  created() {
    this.ruleForm = JSON.parse(JSON.stringify(this.boothname))
  },
  methods: {
    getChangeLogo(formName) {
      this.$refs[formName].validate(async(valid) => {
        if (valid) {
          const params = {
            areaCode: '+86',
            password: this.ruleForm.password,
            mobile: this.ruleForm.mobile,
            code: this.ruleForm.code,
            loginSource:'137'
          }
          await api.login.resetPassword(params)
          this.$emit('closeEvents', true)
          this.$message({ message: '设置成功', type: 'success' })
        } else {
          return false
        }
      })
    },
    getChangeLogoCancel(formName) {
      this.$refs[formName].resetFields()
      this.$emit('closeEvents', false)
    },
    async getSendCode() {
      const _this = this
      _this.verification.mobile = checkPhone(_this.ruleForm.mobile)
      if (!_this.verification.mobile) return false
      const params = {
        mobile: _this.ruleForm.mobile,
        type: 2 // 0-快速注册登录时，1-验证码原手机号时，2-修改密码时，3-绑定手机号
      }

      await api.login.sendMobileCode(params)
      const TIME_COUNT = 60
      if (!this.timer) {
        this.count = TIME_COUNT
        this.timeShow = false
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--
          } else {
            this.timeShow = true
            clearInterval(this.timer)
            this.timer = null
          }
        }, 1000)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  @import '@/styles/index.scss';
  .container {
       -moz-user-select: none; /* 火狐 */
    -webkit-user-select: none; /* webkit浏览器 */
    -ms-user-select: none; /* IE10 */
    -khtml-user-select: none; /* 早期浏览器 */
    user-select: none;
    .thisblack-bgc {
      background: rgba(0,0,0,.5);
    }
    ::v-deep .el-dialog {
      .el-dialog__header {
        padding: 12px 16px;
        background: #F5F8FC;
        .head-title {
          font-size: 16px;
          color: #202933;
          font-weight: 500;
          line-height: 1.5;
          text-align: left;
        }
        .head-tip {
          font-size: 14px;
          color: #B9C0C7;
          font-weight: 400;
          line-height: 1.5;
          a{
            cursor: pointer;
            color: #0C7FF2;
          }
        }
      }
      .el-dialog__body {
        padding: 25px 40px;
        .content {
          .el-upload {
            .el-button {
              border: 1px solid #0C7FF2;
              color: #0C7FF2;
              padding: 8px 16px;
            }
          }
          .el-upload-list {
            display: none;
          }
          .crop-box {
            margin-top: 100px;
            @include flex(row, center, flex-start);
          }
          .crop-rotate {
            width: 330px;
            margin: 16px 0 30px;
            @include flex(row, center,center);
            .rotate-left {
              display: inline-block;
              vertical-align: middle;
              padding: 14px 17px;
              background: #F5F8FC;
              color: #0C7FF2;
              font-size: 14px;
              margin-right: 16px;
              font-weight: 500;
              cursor: pointer;
              i {
                margin-right: 10px;
                color: #0C7FF2;
              }
            }
            .rotate-right {
              display: inline-block;
              vertical-align: middle;
              padding: 14px 17px;
              background: #F5F8FC;
              color: #0C7FF2;
              font-size: 14px;
              font-weight: 500;
              cursor: pointer;
              i {
                margin-right: 10px;
                color: #0C7FF2;
              }
            }
          }
        }
      }
      .el-dialog__footer {
        padding: 24px 0;
        text-align: center;
        border-top: 1px solid #E5EAF0;
        .el-button {
          padding: 8px 16px;
        }
      }
      .el-form-item--medium .el-form-item__content{
          text-align: left;
      }
      .el-input__suffix{
          right: 10px;
      }
    }
  }
.pt30{
      padding-top: 30px;
  }
  .pb30{
      padding-bottom: 30px;
  }
  .mb24{
      margin-bottom: 24px;
  }
  .w300{
      width: 300px;
  }

</style>
